// 实现使用函数调用xtx-message组件的逻辑
import { createVNode, render } from 'vue'
import xtxMessage from './xtx-message.vue'

// 准备dom容器
// 创建虚拟DOM，createVnode('标签名/组件'，{属性})
const divNode = createVNode('div', { class: 'xtx-message-container' })
// 把虚拟dom徐渲染到body中
render(divNode, document.body)
// 虚拟dom渲染成功后，可以通过el属性获取到真实的dom节点
const div = divNode.el

// 定时器标识
let timer = null

export const message = ({ type, message }) => {
  // 实现：根据xtx-message.vue渲染消息提示
  //   1.导入组件
  //   2.根据罪组件创建虚拟节点
  const vnode = createVNode(xtxMessage, { type, message })
  //   3.准备一个dom容器
  //   4.把虚拟节点渲染到dom容器中
  render(vnode, div)
  //   5.开启定时器，移出dom容器内容
  clearTimeout(timer)
  timer = setTimeout(() => {
    render(null, div)
  }, 3000)
}
